var p1 = {
    productId:'201300001',
    productName:'Lenovo A820T' ,
    productPrice:650,
    productDate:'2018-01-07',
    productStatus:true
}

var p2 = {
    productId:'201300007',
    productName:'Acer 星锐 4752G' ,
    productPrice:4000.8,
    productDate:'2019-09-02',
    productStatus:true
}

var p3 = {
    productId:'201300009',
    productName:'ZTE U880' ,
    productPrice:450,
    productDate:'2021-12-07',
    productStatus:false
}

var arr = [p1,p2,p3] ;


/**
 * 创建数据行
 * @param {*} table 表格
 * @param {*} p 当前行的数据
 */
function createTr(table,p) {
    // 第一：选择要操作的节点 / 创建相关节点
    var tr = $("<tr></tr>") ;

    var td1 = $("<td><input type='checkbox' class='ck'/></td>") ;
    var td2 = $("<td>" + p.productId + "</td>") ;
    var td3 = $("<td>" + p.productName + "</td>") ;
    var td4 = $("<td>" + p.productPrice + "</td>") ;
    var td5 = $("<td>" + p.productDate + "</td>") ;
    var td6 = $("<td><input type='checkbox' class='isDown'/></td>") ;
    var td7 = $("<td><span class='del'>删除</span><span class='showUpdate'>修改</span><span class='showDetail'>详情</span></td>") ;

    // 第二：操作 - 链式操作
    td6.find(".isDown")
        .prop("checked",p.productStatus) ;

    tr.append(td1)
        .append(td2)
        .append(td3)
        .append(td4)
        .append(td5)
        .append(td6)
        .append(td7) ;
    table.find("tbody").append(tr) ;
}

// 页面加载时，执行相关的实化工作 
// 初始化年份
function initYear() {
    // 获取当前年份
    var now = new Date() ;
    var year = now.getFullYear() ;
    // 循环创建 option 节点为，并添加到 select 节点中
    for(i=year-10;i<=year+10;i++) {
        $("#year").append("<option>" + i + "</option>") ;
    }
    // 页面加载时，希望年份默认选择当前年份
    $("#year option").filter(function(){
        return $(this).text() == year;
    }).prop("selected",true)  ;
}
// 初始化月份
function initMonth() {
    // 获取当前月份
    var month = new Date().getMonth() + 1;
    month = month < 10 ? '0' + month : month ;

    // 循环创建 option 节点，并添加到 select 节点中
    for(i=1;i<=12;i++) {
        $("#month").append("<option>" + (i < 10 ? '0' + i : i) + "</option>") ;
    }
    // 页面加载时，希望月份默认选择当前月份
    $("#month option").filter(function(){
        return $(this).text() == month;
    }).prop("selected",true)  ;
}
// 初始化日期
function initDay(year,month) {
    console.log(year,month);
    
    // 获取当前日期
    var date = new Date().getDate() ;
    date = date < 10 ? '0' + date : date ;

    // 获取当前月的总天数
    var day = 28 ;

    month = month * 1 
    switch(month) {
        case 1:
        case 3:
        case 5:
        case 7:
        case 8:
        case 10:
        case 12:
            day = 31 
            break ;
        case 4:
        case 6:
        case 9:
        case 11:            
            day = 30 ;
            break;
        default:
            // 判断是否润年，润年2月是29天，平年2月是28天
            if(year%4==0 && year%100!=0 || year%400==0) {
                day = 29 ;
            } 
    }

    console.log("----" + day);
    

    // 循环创建 option 节点，并添加到 select 节点中
    for(i=1;i<=day;i++) {
        $("#day").append("<option>" + (i < 10 ? '0' + i : i) + "</option>") ;
    }
    // 页面加载时，希望日期默认选择当前日期
    $("#day option").filter(function(){
        return $(this).text() == date;
    }).prop("selected",true)  ;


}

/**
 * ========== 初始化页面 ==========
 */
function initPage() {
    // 1.初始化表格数据
    for(var i=0;i<arr.length;i++) {
        createTr($("#tbl"),arr[i]) ;
    }

    // 2.初始化年份
    initYear();

    // 3.初始化月份
    initMonth() ;

    // 4.初始化日期
    var now = new Date() ;
    initDay(now.getFullYear(),now.getMonth()+1) ;
}
initPage() ;

// change：下拉列表框发生切换时触发
// 切换年份，更新日期
$("#year").change(function(){
    var year = $(this).find("option:selected").text() ;
    var month = $("#month option:selected").text() ;
  
    initDay(year,month) ;
})

// 切换月份，也要更新日期
$("#month").change(function(){
    var year = $("#year option:selected").text() ;
    var month = $(this).find("option:selected").text() ;
    
    initDay(year,month) ;
})


/**
 * 还原表单初始状态
 */
function clearForm() {
    $("#product_id").val('') ;
    $("#product_name").val('') ;
    $("#product_price").val('') ;

    initYear() ;
    initMonth() ;

    var now = new Date() ;
    var y = now.getFullYear();
    var m = now.getMonth + 1;
    initDay(y,m) ;

    $("input[name=product_status]:eq(0)")
        .prop("checked",true) ;

    // 设置文本框获取焦点
    $("#product_id").focus() ;

    // 还原表单状态 - 解除只读与禁用
    $("input").prop("readonly",false)
    $("select").prop("disabled",false)
    $("input[type=radio]").prop("disabled",false)
}

/**
 * ========== 添加商品 ==========
 */
$("#btnAdd").click(function(){
    // 第一：获取表单中的数据，验证数据的合法性（略），并封装为商品对象
    var y = $("#year option:selected").text() ;
    var m = $("#month option:selected").text() ;
    var d = $("#day option:selected").text() ;

    var s = $("input[name=product_status]:eq(0)")
        .prop("checked")  ;

    var p = {
        productId:$("#product_id").val(),
        productName:$("#product_name").val() ,
        productPrice:$("#product_price").val(),
        productDate:y + "-" + m + "-" + d,
        productStatus:s 
    }

    // 第二：添加数据行
    createTr($("#tbl"),p);

    // 第三：还原表单初始状态
    clearForm() ;

    // 第四：是否全选
    isCheckAll() ;
}) ;


/**
 * ========== 删除商品 ==========
 */
// $("#tbl tr td:eq(6)").find("span:eq(0)").click(function(){
//     alert("OK...")
// }) ;

$("#tbl").on("click",".del",function(){

    var bl = confirm("您真的要删除此条数据吗？") ;

    if(bl) {
        // 基于某个节点，向父元素查找最近匹配的节点
        $(this).closest("tr").remove() ;
    } 
}) ;


/**
 * ========== 批量删除商品 ==========
 */
$("#btnDels").click(function(){
    // 获取勾选的复选框
    var cks = $(".ck:checked") ;

    // 判断是否勾选
    if(cks.length == 0) {
        alert("请勾选要删除的商品！")
        return ;
    }
    // 判断确定删除
    var bl = confirm("您真的要删除这 " + cks.length + " 条数据吗？") ;
    if(bl) {
        cks.closest("tr").remove() ;
    }
}) ;


// 全选
$("#all").click(function(){
    // 设置各行第一列的复选框与全选复选框的状态一致
    $(".ck").prop("checked",$(this).prop("checked")) ;
}) ;


/**
 * 判断是否全选
 */
function isCheckAll() {
    // 第一：获取第一列复选框选中的数量
    var ckLen = $(".ck:checked").length ;
    // 第二：获取数据行的数量
    var trLen = $("#tbl").find("tr").length - 1;

    console.log(ckLen,trLen);

    // 第三：判断
    if(ckLen != trLen) {
        $("#all").prop("checked",false) ;
        return ;
    } 
    $("#all").prop("checked",true) ;
}

// 检查全选状态
$("#tbl").on("click",".ck",function(){
    isCheckAll() ;
}) ;


/**
 * 回显 修改或详情 按钮所在行的数据到表单中
 * 
 * @param {回} btn 修改按钮 或 详情按钮
 */
function showData(btn) {
    // 获取修改按钮或详情按钮所在行的各列数据
    var tds = btn.closest("tr").find("td");

    var productId = $(tds[1]).text() ;
    var productName = $(tds[2]).text() ;
    var productPrice = $(tds[3]).text() ;
    var productDate = $(tds[4]).text() ;

    // 如："2020-09-02" --- [2020,09,02]
    var arr = productDate.split("-") ;
    var y = arr[0] ;
    var m = arr[1] ;
    var d = arr[2] ;

    // 获取单元格中复选框的选择状态
    var productStatus = $(tds[5])
                            .find("input")
                            .prop("checked") ;
    
    // 第三：把各列数据，设置在相关的表单控件中
    $("#product_id").val(productId)
    $("#product_name").val(productName)
    $("#product_price").val(productPrice)

    // 回显年份
    $("#year option").filter(function(){
        return $(this).text() == y ;
    }).prop("selected",true) ;

    // 回显月份
    $("#month option").filter(function(){
        return $(this).text() == m ;
    }).prop("selected",true) ;

    // 回显日期
    $("#day option").filter(function(){
        return $(this).text() == d ;
    }).prop("selected",true) ;

    // 回显是否上架
    if(productStatus) {
        $("#status1").prop("checked",true) 
    } else {
        $("#status2").prop("checked",true) 
    }
}

/**
 * ========== 回显修改数据到表单中 ==========
 */
$("#tbl").on("click",".showUpdate",function(){
    // 第一：初始化表单
    $("#title").text("商品修改") ;
    $("#btnAdd").hide() ;
    $("#btnUpdate").show() ;

    // 解除只读和禁用
    $("input").prop("readonly",false)
    $("select").prop("disabled",false)
    $("input[type=radio]").prop("disabled",false)

    // 设置商品编号只读
    $("#product_id").prop("readonly",true)
    
    // 第二：回显数据 - $(this) - 修改按钮
    showData($(this)) ;
}) ;


/**
 * ========== 查看详情 ==========
 */
$("#tbl").on("click",".showDetail",function(){
    // 第一：初始化表单
    $("#title").text("商品详情") ;
    $("#btnAdd").hide() ;
    $("#btnUpdate").hide() ;

    // 设置只读和禁用
    $("input").prop("readonly",true)
    $("select").prop("disabled",true)
    $("input[type=radio]").prop("disabled",true)
    
    // 第二：回显数据 -  $(this) - 详情按钮
    showData($(this)) ;
}) ;

/**
 * ========== 双击表单中，还原添加商品表单 ==========
 */
$("#containner form").dblclick(function(){
    $("#title").text("商品添加") ;
    $("#btnAdd").show() ;
    $("#btnUpdate").hide() ;

    clearForm() ;
}) ;


/**
 * ========== 修改商品 ==========
 */
$("#btnUpdate").click(function(){
    // 第一：获取表单中的数据
    var y = $("#year option:selected").text() ;
    var m = $("#month option:selected").text() ;
    var d = $("#day option:selected").text() ;

    var productId = $("#product_id").val() ;
    var productName = $("#product_name").val() ;
    var productPrice = $("#product_price").val();
    var productDate = y + "-" + m + "-" + d ;
    var productStatus = $("input[name=product_status]:eq(0)")
        .prop("checked")  ;


    // 第二：查找数据 - 查找修改数据所在的行
    var trs = $("#tbl tr:not(:first)") 

    for(var i=0;i<trs.length;i++) {
        // 1.获取各行第二列的商品编号
        var pid = $($(trs[i]).find("td")[1]).text()  ;
        
        // 2.判断，找到修改数据所在的行
        if(pid == productId) {
            // 3.获取当前行各列节点
            var tds = $(trs[i]).find("td") ;

            // 第三：修改数据 - 把各列的数据修改为表单输入的数据
            $(tds[2]).text(productName) ;
            $(tds[3]).text(productPrice) ;
            $(tds[4]).text(productDate) ;
            $(tds[5]).find("input").prop("checked",productStatus) ;

            break ;
        }
    }

    // 第四：清空并还原为添加数据表单
    clearForm() ;
    $("#title").text("商品添加") ;
    $("#btnAdd").show() ;
    $("#btnUpdate").hide() ;
}) ;










